<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册页面</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="register.css">
</head>

<body>
    <header>
        <div class="nav">
            <!-- 头部左侧文字链接 -->
            <ul class="nav-left">
                <li class="conweixin">
                    <a href="javascript:;">关注</a>
                    <div class="weixin">
                        <div class="weixin-con">
                            <img src="img/weChat.jpg" alt="">
                            <p>关注公众号</p>
                        </div>
                    </div>
                </li>
                <li class="loadapp">
                    <a href="javascript:;">下载APP</a>
                    <div class="app">
                        <div class="app-con">
                            <img src="img/app.jpg" alt="">
                            <p>优购app下载</p>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 头部右侧文字链接 -->
            <ul class="nav-right">
                <li>
                    <a href="login.html">登录</a>
                    <span>/</span>
                    <a href="register.html">注册</a>
                </li>
                <li class="collect">
                    <a href="javascript:;"><i></i>收藏</a>
                </li>
                <li class="bag">
                    <a href="javascript:;"><i></i>购物袋</a>
                </li>
                <li class="publicword">
                    <a href="javascript:;">公告</a>
                    <div class="public">
                        <ul class="public-con">
                            <li><a href="javascript:;" class="red">近期物流情况安排通知</a></li>
                            <li><a href="javascript:;">优购客服电话变更</a></li>
                            <li><a href="javascript:;">关闭分享购频道</a></li>
                            <li><a href="javascript:;">提醒会员谨防诈骗电话</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <section>
        <div class="sec-con">
            <img src="img/register-logo.png" alt="">
            <span>新用户注册</span>
        </div>

        <div class="bannerpic">
            <div class="banner-con">
                <img src="img/pic.jpg" alt="">
                <div class="register">
                    <div class="reg-con">
                        <ul class="word">
                            <li><a href="login.html">登录</a></li>
                            <li><a href="register.html">注册</a></li>
                        </ul>
                        <div class="reg-in">
                            <!-- 手机号 -->
                            <div>
                                <p>
                                    <label for="phone">手机号</label>
                                    <input type="text" id="phone">
                                </p>
                                <div class="yzphone">
                                    <span class="right"></span>
                                    <span class="wrong">请正确输入手机号码</span>
                                </div>
                            </div>
                            <!-- 验证码 -->
                            <div class="in-second">
                                <p style="width:200px;">
                                    <label for="yzm">验证码</label>
                                    <input type="text" id="yzm" style="width: 123px">
                                </p>
                                <b class="suiji"></b>
                                <div class="yz">
                                    <span class="right"></span>
                                    <span class="wrong">请正确输入验证码</span>
                                </div>
                            </div>
                            <!-- 密码 -->
                            <div>
                                <p>
                                    <label for="password">密码</label>
                                    <input type="password" id="password" placeholder="字母、数字、下划线组成，6-25个字符">
                                </p>
                                <div class="yzpwd">
                                    <span class="right"></span>
                                    <span class="wrong">请正确输入密码</span>
                                </div>
                            </div>
                            <!-- 确认密码 -->
                            <div>
                                <p>
                                    <label for="repassword">确认密码</label>
                                    <input type="password" id="repassword">
                                </p>
                                <div class="yzrepwd">
                                    <span class="right"></span>
                                    <span class="wrong">输入密码不一致！</span>
                                </div>
                            </div>

                            <!-- 去注册按钮 -->
                            <button id="goregister">确认并注册</button>

                            <!-- 注： -->
                            <div style="line-height: 30px;margin-top: 5px;margin-left: 8px;color: brown;font-size: 14px;">注：<br> 1.手机号码为至少3位及以上数字。<br> 2.密码由至少6位数字、字母下划线组成
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>Copyright © 2011-2014 Yougou Technology Co., Ltd.&nbsp;&nbsp;&nbsp;&nbsp;<span>粤ICP备09070608号-4</span>&nbsp;&nbsp;&nbsp;&nbsp;增值电信业务经营许可证：<span>粤 B2-20090203</span></footer>
</body>

</html>
<script src="jquery.min.js "></script>
<script src="index.js "></script>
<script>
    //获取随机4位验证码
    let num = $(".suiji");
    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    let res = "";
    for (let i = 0; i < 4; i++) {
        let n = parseInt(Math.random() * arr.length);
        res = res + arr[n];
    }
    num.html(res);

    num.click(function() {
        let res = "";
        for (let i = 0; i < 4; i++) {
            let n = parseInt(Math.random() * arr.length);
            res = res + arr[n];
        }
        num.html(res);
    })

    let regphone = /^\d{3,}$/;
    let regpwd = /^\w{6,}$/;
    //动态判断

    //手机号
    $("#phone").blur(function() {
        $(".yzphone span").css("display", "none")
        if (regphone.test($("#phone").val())) {
            $(".yzphone .right").css("display", "block");
        } else {
            $(".yzphone .wrong").css("display", "block");
        }
    })

    //密码
    $("#password").blur(function() {
        $(".yzpwd span").css("display", "none")
        if (regpwd.test($("#password").val())) {
            $(".yzpwd .right").css("display", "block");
        } else {
            $(".yzpwd .wrong").css("display", "block");
        }
    })

    //验证码.
    $("#yzm").blur(function() {
        $(".yz span").css("display", "none")
        if (num.html() === $(this).val()) {
            $(".yz .right").css("display", "block");
        } else {
            $(".yz .wrong").css("display", "block");
        }
    })

    //确认密码
    $("#repassword").blur(function() {
        $(".yzrepwd span").css("display", "none")
        if ($("#password").val() === $(this).val()) {
            $(".yzrepwd .right").css("display", "block");
        } else {
            $(".yzrepwd .wrong").css("display", "block");
        }
    })


    //点击注册按钮
    $("#goregister").click(function() {
        if (regphone.test($("#phone").val()) && regpwd.test($("#password").val()) && num.html() === $("#yzm").val() && $("#password").val() === $("#repassword").val()) {
            let uname = $("#phone").val();
            let pwd = $("#password").val();
            $.ajax({
                url: "http://10.35.164.244:8080/goregister",
                data: {
                    username: uname,
                    password: pwd
                },
                success(data) {
                    // console.log(data);
                    if (data === "success") {
                        location.href = "http://10.35.164.244:8080/index.html";
                    }
                    if (data === "exist") {
                        alert("该用户已被注册，请重新注册！")
                        history.go(0);
                    }
                }
            })
        }
    })

    //判断是否登录
    let uname = sessionStorage.getItem("uname");
    console.log(uname);
    if (uname) {
        $(".bag a").attr("href", `/car?username=${uname}`);
    } else {
        $(".bag a").click(function() {
            alert("请先登录/注册您的账号")
        })
    }
</script>